<template>
	<view class="container">
		<view style="width: 100%;height: 20%;">
			<view style="width: 100%;height: 15%;"></view>
			<view style="width: 9%;height: 20%;float: left;">
				
			</view>
			<!-- 头像 -->
			<view v-for="coach in Coacharray" :key="coach.coachId" style="position: relative; overflow: hidden; width: 15vh; height: 15vh; border-radius: 9%; float: left;">
				<image v-if="coach.coachImg" class="carousel-image" :src="'http://101.43.223.224:8765/image/getImageById?id=' + coach.coachImg.split(',')[0]" mode=""></image>
			</view>
			<view style="width: 50%; height: 70%; margin-left: 45%; margin-top: -35%; float: left;">
				<p v-for="coach in Coacharray" :key="coach.coachId" style=" rgba(0, 0, 0, 1);padding-left: 10%;padding-top: 15%;">姓名：{{ coach.coachName }}</p>
				<p v-for="coach in Coacharray" :key="coach.coachId" style="rgba(0, 0, 0, 1);padding-left: 10%;padding-top: 9%;">手机号：{{ coach.coachPhone }}</p>
				<p v-for="coach in venueDate" :key="coach.venueUniqueIdentifier" style="rgba(0, 0, 0, 1);padding-left: 10%;padding-top: 9%;">场馆：{{ venueName }}</p>
			</view>
			<!-- vip标识 -->
			<!-- <view style="width: 100%;height: 10%;"></view> -->
		</view>
		<view style="width: 100%;height: 76%;background-color: aliceblue;">
			<view style="width: 100%;height: 4%;"></view>
			<!-- 个人档案、我的预约、我的评论、意见反馈 -->
			<view style="width: 90%;height: 25%;margin: 0 auto;border: 4px solid aliceblue;border-radius: 9px;box-shadow: 10px 12px 14px  rgba(75, 75, 75, 0.2);">
				<view class="div4">
					<span style="font-size: 18px;font-weight: 400;line-height: 6vh;font-weight: bolder;">个人简介：</span>
					<span v-for="coach in Coacharray" :key="coach.coachId" style="font-size: 18px;font-weight: 400;line-height: 6vh;">{{ coach.coachInformation }}</span>
				</view>
				<view style="width: 100%;height: 4%;"></view>
				<view class="div4">
					<span style="font-size: 18px;font-weight: 400;line-height: 6vh;font-weight: bolder;">个人经历：</span>
					<span v-for="coach in Coacharray" :key="coach.coachId" style="font-size: 18px;font-weight: 400;line-height: 6vh;">{{ coach.coachExperience }}</span>
				</view>
				<view style="width: 100%;height: 4%;"></view>
				<view class="div4">
					<span style="font-size: 18px;font-weight: 400;line-height: 6vh;font-weight: bolder;">个人特长：</span>
					<span v-for="coach in Coacharray" :key="coach.coachId" style="font-size: 18px;font-weight: 400;line-height: 6vh;">{{ coach.coachSpecialty }}</span>
				</view>
			</view>
			<view style="width: 100%;height: 2%;"></view>
			<view style="width: 100%;height: 4%;">
				<span style="font-size: 16px;font-weight: 600;rgba(0, 0, 0, 1);padding-left: 5%;">教学案例：</span>
			</view>
			<view style="width: 90%;height: 56%;margin: 0 auto;border: 4px solid aliceblue;border-radius: 9px;box-shadow: 10px 12px 14px  rgba(75, 75, 75, 0.2);overflow: scroll;">
				
				<view style="height: 100%;">
				<view style="width: 95%; margin: 0 auto; height: 45%; border: 4px solid aliceblue; border-radius: 9px; box-shadow: 0px 2px 10px rgba(75, 75, 75, 0.2);margin-top: 1%;" v-for="user in userCase" :key="user.memberUserName" @click="reader(user)">
				    <view style="">
				        <span style="font-size: 16px; color: #323232; padding-left: 5%;">学员:{{user.memberUserName}}</span>
				    </view>
					<view style="padding-top: 2%;">
						<span style="font-size: 16px; color: #323232; padding-left: 5%;">已完成{{user.caseCount}}门课程</span>
					</view>
					<!-- <view style="padding-top: 2%;">
						<span style="font-size: 16px; color: #323232; padding-left: 5%;">体重：kg</span>
						<span style="font-size: 16px; color: #323232; padding-left: 20%;">体脂：%</span>
					</view> -->
					<view style="width: 90%; height: 53%;display: flex; flex-wrap: nowrap;overflow-x: auto;">
						<view style="width: 25%; height: 90%;margin-left:2%;margin-top: 2.5%;" v-for="photoId in user.caseEndingPhotoList">
						<image  :src="'http://101.43.223.224:8765/image/getImageById?id=' + photoId" mode="" style="width: 100%;height: 100%;"></image>
						</view>
					</view>		
				</view>
				</view>
				<!-- <view style="width: 100%;height: 45%;">
					<view style="width: 10%;height: 70%;float: left;"></view>
					<view style="width: 25%;height: 70%;float: left;">
						<view style="width: 100%;height: 20%;background-color: rgba(158, 207, 255, 1);border-radius: 9%;text-align: center;">
							<span style="color: rgba(255, 255, 255, 1);font-size: 16px;">训练前</span>
						</view>
						<view style="width: 100%;height: 2%;"></view>
						<view v-for="coach in caseDate" :key="coach.coachId" style="width: 100%; height: 78%; border-radius: 9%;">
							<image style="width: 100%;height: 100%; border-radius: 5px;" :src="'http://101.43.223.224:8765/image/getImageById?id=' + coach.caseStartPhoto" mode=""></image>
						</view>
					</view>
					<view style="width: 30%;height: 70%;float: left;text-align: center;">
						<p v-for="coach in userDate" :key="coach.coachId" style="padding-top: 25%;color: rgba(143, 143, 143, 1);">学员：{{ coach.memberUserRealName }}</p>
						<p v-for="(coach, index) in selectUserCaseDate" :key="coach.coachId" style="padding-top: 10%; color: rgba(143, 143, 143, 1);">
						  <span v-if="index === 1">训练{{ coach.byTime }}天</span>
						</p>
					</view>
					<view style="width: 25%;height: 70%;float: left;">
						<view style="width: 100%;height: 20%;background-color: rgba(146, 163, 253, 1);border-radius: 9%;text-align: center;">
							<span style="color: rgba(255, 255, 255, 1);font-size: 16px;">训练后</span>
						</view>
						<view style="width: 100%;height: 2%;"></view>
						<view v-for="coach in caseDate" :key="coach.coachId" style="width: 100%; height: 78%; border-radius: 9%;">
							<image style="width: 100%;height: 100%; border-radius: 5px;" :src="'http://101.43.223.224:8765/image/getImageById?id=' + coach.caseEndingPhoto" mode=""></image>
						</view>
					</view>
					<view style="width: 100%;height: 30%;float: left;">
						<view style="width: 100%;height: 50%;"></view>
						<span style="width: 30%; font-size: 14px;font-weight: 600;rgba(0, 0, 0, 1);padding-left: 5%;">训练前：</span>
						<span v-for="coach in userDate" :key="coach.coachId" style="width: 35%; padding-left: 3%;font-size: 14px;color: rgba(143, 143, 143, 1);">体重：{{ coach.memberUserWeight }}kg</span>
						<span v-for="coach in userDate" :key="coach.coachId" style="width: 35%; padding-left: 5%;font-size: 14px;color: rgba(143, 143, 143, 1);">体脂率：{{ coach.memberUserBodyFat }}%</span>
					</view>
					<view style="width: 100%;height: 30%;float: left;">
						<view style="width: 100%;height: 30%;"></view>
						<span style="width: 30%; font-size: 14px;font-weight: 600;rgba(0, 0, 0, 1);padding-left: 5%;">训练后：</span>
						<span v-for="coach in userrecordDate" :key="coach.coachId" style="width: 35%; padding-left: 3%;font-size: 14px;color: rgba(143, 143, 143, 1);">体重：{{ coach.userWeight }}kg</span>
						<span v-for="coach in userrecordDate" :key="coach.coachId" style="width: 35%; padding-left: 5%;font-size: 14px;color: rgba(143, 143, 143, 1);">体脂率：{{ coach.userBfp }}%</span>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {},
				Coacharray: [],
				caseDate: [],
				userDate: [],
				userrecordDate: [],
				selectUserCaseDate: [],
				venueDate: [],
				userCase:[],
				venueName:""
			}
		},
		created() {
			this.selectCoachByUserId()
			this.selectVenueName()
		},
		methods: {
			// 查询场馆名称
			selectVenueName(){
				uni.request({
				    url: 'http://127.0.0.1:17000/memberUser/selectVenueName',
				    method: "GET",
				    data: {
						venueUniqueIdentifier: uni.getStorageSync('userInfo').venueUniqueIdentifier
					},
					success: (res) => {
						this.venueName = res.data.data.data
					},
					})
			},
			// 点击查看具体案例
			reader(user){				
				const userId = user.memberUserId
				uni.navigateTo({
				    url: '/pages/index/caseDetails?userId=' + userId,
				    animationType: 'slide-out-top',
				    animationDuration: 200
				});
			},
			// 查询用户数据并进行逻辑判断
			selectCoachByUserId(){
				uni.request({
				    url: 'http://127.0.0.1:17000/memberUser/selectCoachByUserId',
				    method: "GET",
				    data: {
						id: uni.getStorageSync('userInfo').id,
						venueUniqueIdentifier: uni.getStorageSync('userInfo').venueUniqueIdentifier
					},
				    success: (res) => {
						if(res.data.data.data === null){
							uni.showToast({
							       title: '暂未绑定教练，即将跳转页面！！',
							       icon: 'none',
							       duration: 1500,
							       backgroundColor: '#ff0000' // 设置为红色
							   });
														
							   setTimeout(function() {
							       uni.navigateTo({
							           url: '/pages/index/bindingCoach',
							           animationType: 'slide-out-top',
							           animationDuration: 200
							       });
							   }, 1500);
						}else{
							const userInfo = res.data.data.data 
							uni.setStorageSync('userInfo', userInfo)
							// 查询教练数据
							uni.request({
							    url: 'http://127.0.0.1:17000/memberUser/selectCoachByInvitationCode',
							    method: "GET",
							    data: {
									invitationCode: uni.getStorageSync('userInfo').invitationCode,
									venueUniqueIdentifier: uni.getStorageSync('userInfo').venueUniqueIdentifier
								},
							    success: (res) => {
									uni.setStorageSync('coach', res.data.data.data.id)
									this.selectTeacherCase();
									this.load();
									this.case();
									this.userload();
									this.userrecordload();
									this.selectUserCase();
									this.venueload();
								}
								})
						}
					}
					})
			},
			// 案例查询
			selectTeacherCase(){
				uni.request({
				    url: 'http://127.0.0.1:17000/UserRecord/selectTeacherCase',
				    method: "GET",
				    data: {
						venueUniqueIdentifier: uni.getStorageSync('userInfo').venueUniqueIdentifier,
						coachId: uni.getStorageSync('coach'),
						memberUserId: uni.getStorageSync('userInfo').id
					},
				    success: (res) => {	
						console.log(res)
						this.userCase = res.data.data.data
						console.log(this.userCase)
					}
					})
			},
			load() {
			    // 发起查询请求
			    uni.request({
			        url: 'http://127.0.0.1:17000/CoachManagement/selectAllCoach',
			        method: "GET",
			        data: {
			    		coachId: uni.getStorageSync('coach')
			    	},
			        success: (res) => {
			            if (res.statusCode === 200) {
			                // 将查询结果中的多个任务数据存储到 Coacharray 数组
			                this.Coacharray = res.data.data;
							console.log(this.Coacharray)
			            } else {
			                // 处理请求失败的情况
			                uni.showToast({
			                    title: "请求失败",
			                    icon: "none"
			                });
			            }
			        },
			        fail: (error) => {
			            // 处理请求失败的情况
			            console.log(error)
			            uni.showToast({
			                title: "请求失败",
			                icon: "none"
			            });
			        }
			    });
			},
			case() {
				uni.request({
				    url: 'http://127.0.0.1:17000/caseRecord/listCase',
				    method: "GET",
				    data: {
						coachId: uni.getStorageSync('coach'),
						userId: uni.getStorageSync('userInfo').id
					},
				    success: (res) => {
				        if (res.statusCode === 200) {
				            // 将查询结果中的多个任务数据存储到 caseDate 数组
				            this.caseDate = res.data.data;
				        } else {
				            // 处理请求失败的情况
				            uni.showToast({
				                title: "请求失败",
				                icon: "none"
				            });
				        }
				    },
				    fail: (error) => {
				        // 处理请求失败的情况
				        console.log(error)
				        uni.showToast({
				            title: "请求失败",
				            icon: "none"
				        });
				    }
				});
			},
			userload() {
				uni.request({
				    url: 'http://127.0.0.1:17000/memberUser/selectAllMember',
				    method: "GET",
				    data: {
						userId: uni.getStorageSync('userInfo').id,
						userName: uni.getStorageSync('userInfo').memberUserRealName
					},
				    success: (res) => {
				        if (res.statusCode === 200) {
				            // 将查询结果中的多个任务数据存储到 caseDate 数组
				            this.userDate = res.data.data;
				        } else {
				            // 处理请求失败的情况
				            uni.showToast({
				                title: "请求失败",
				                icon: "none"
				            });
				        }
				    },
				    fail: (error) => {
				        // 处理请求失败的情况
				        console.log(error)
				        uni.showToast({
				            title: "请求失败",
				            icon: "none"
				        });
				    }
				});
			},
			userrecordload() {
				uni.request({
				    url: 'http://127.0.0.1:17000/UserRecord/selectUserRecord',
				    method: "GET",
				    data: {
						userId: uni.getStorageSync('userInfo').id,
						coachId: uni.getStorageSync('coach')
					},
				    success: (res) => {
				        if (res.statusCode === 200) {
				            // 将查询结果中的多个任务数据存储到 caseDate 数组
				            this.userrecordDate = res.data.data;
				        } else {
				            // 处理请求失败的情况
				            uni.showToast({
				                title: "请求失败",
				                icon: "none"
				            });
				        }
				    },
				    fail: (error) => {
				        // 处理请求失败的情况
				        console.log(error)
				        uni.showToast({
				            title: "请求失败",
				            icon: "none"
				        });
				    }
				});
			},
			selectUserCase() {
				uni.request({
				    url: 'http://127.0.0.1:17000/UserRecord/selectUserCase',
				    method: "GET",
				    data: {
						uid: uni.getStorageSync('userInfo').id,
						tid: uni.getStorageSync('coach'),
						caseStatus: 1,
					},
				    success: (res) => {
				        if (res.statusCode === 200) {
				            // 将查询结果中的多个任务数据存储到 caseDate 数组
				            this.selectUserCaseDate = res.data.data.data;
				        } else {
				            // 处理请求失败的情况
				            uni.showToast({
				                title: "请求失败",
				                icon: "none"
				            });
				        }
				    },
				    fail: (error) => {
				        // 处理请求失败的情况
				        console.log(error)
				        uni.showToast({
				            title: "请求失败",
				            icon: "none"
				        });
				    }
				});
			},
			venueload() {
				uni.request({
				    url: 'http://127.0.0.1:17000/VenueManagement/selectVenueByCoachId',
				    method: "GET",
				    data: {
						venueUniqueIdentifier: uni.getStorageSync('userInfo').venueUniqueIdentifier,
					},
				    success: (res) => {
				        if (res.statusCode === 200) {
				            // 将查询结果中的多个任务数据存储到 caseDate 数组
				            this.venueDate = res.data.data;
				        } else {
				            // 处理请求失败的情况
				            uni.showToast({
				                title: "请求失败",
				                icon: "none"
				            });
				        }
				    },
				    fail: (error) => {
				        // 处理请求失败的情况
				        console.log(error)
				        uni.showToast({
				            title: "请求失败",
				            icon: "none"
				        });
				    }
				});
			},
			goIndex () {
				console.log("跳转到首页");
				uni.navigateTo({
					url: '/pages/index/index',
					animationType: 'slide-out-top',
					animationDuration: 200
				})
			},
			goTraining () {
				uni.navigateTo({
					url: '/pages/index/training',
					animationType: 'slide-out-top',
					animationDuration: 200
				})
			},
			goMy () {
				uni.navigateTo({
					url: '/pages/index/my',
					animationType: 'slide-out-top',
					animationDuration: 200
				})
			},
			goClass () {
				uni.navigateTo({
					url: '/pages/index/class',
					animationType: 'slide-out-top',
					animationDuration: 200
				})
			}
		}
	}
</script>

<style>
	.carousel-image {
	        width: 100%;
	        height: 100%;
	        border-radius: 5px;
	}
	/* 设置背景图片 */
	.container {
	  /* display: flex; */
	  justify-content: center;
	  align-items: center;
	  height: 100vh;
	  /* background: linear-gradient(223.47deg, rgba(146, 163, 253, 1) 0%, rgba(157, 206, 255, 1) 100%); */
	  background-image: linear-gradient(to bottom right,  #94A9FD,#93b0ff,#b9e1ff);
	  /* background: blue; */
	  /* background-size: cover; */
	}
	.div8{
		width: 9%;
		height: 100%;
		/* background-color: green; */
		float: left;
	}
	.div7{
		width: 100%;
		height: 50%;
		/* background-color: red; */
	}
	.div6{
		width: 100%;
		height: 50%;
	}
	.div5{
		width: 100%;
		height: 30%;
		/* background-color: yellow; */
	}
	.div4{
		width: 90%;
		height: 25%;
		margin: 0 auto;
		border-bottom: 1px solid #ccc;
		/* background-color: pink; */
	}
	.hd{
		overflow-x: auto;
	    display: -webkit-box;
	    -webkit-overflow-scrolling: touch;
	    margin: 0.5rem 0.5rem
	}
	.zx{
		overflow:auto;
	    /* display: -webkit-box; */
	    -webkit-overflow-scrolling: touch;
	    margin: 0.5rem 0.5rem
	}
	.div1{
		width: 100%;
		height: 90%;
		background: rgba(255, 255, 255, 1);
		border-radius: 100px 100px, 0px, 0px;
		border-top-left-radius: 40px;
		border-top-right-radius: 40px;
	}
	.img1{
		width: 100%;
		height: 100%;
	}
</style>